create-react-app の手元開發で CORS 制限囘避

手元で backend server と react-scripts start を起動して、frontend から backend server には CORS (cross-origin resource sharing) 制限で XHR できない

backend server を http://localhost:8000 で起動する

react-scripts start を http://localhost:3000 で起動する

http://localhost:8000 からの response には、Access-Control-Allow-Origin: http://localhost:3000 header が附いてゐないから、CORS 制限で停められる

Access-Control-Allow-Origin を返す proxy を立ててあげる

NginxNginx.icon で立てるのが早い

code:nginx.conf

events {}

http {

server {

listen 8001 default_server;

location / {

add_header Access-Control-Allow-Headers "*";

add_header Access-Control-Allow-Methods "*";

add_header Access-Control-Allow-Origin "http://localhost:3000";

}

$ nginx -t -c "$(pwd)/proxy/nginx.conf"

code:docker-compose.yml

---

version: "3.5"

services:

proxy:

image: nginx:stable

ports:

- "8001:8001"

volumes:

- ./nginx.conf:/etc/nginx/nginx.conf

$ docker compose up --pull

8001 番 post で proxy が待ち受けてゐるので、frontend からの request を http://localhost:8001 に向け替へる

package.json に "proxy": true を設定するのは忘れろ